<!DOCTYPE html>
<html>
<!--author:wjx-->
<head>
  <title>忘记密码</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="keywords" content="New Theme Forms template Responsive, Login form web template,Flat Pricing tables,Flat Drop downs  Sign up Web Templates, Flat Web Templates, Login sign up Responsive web template, SmartPhone Compatible web template, free WebDesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
  <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
  <!-- Custom Theme files -->
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <!-- //Custom Theme files -->
  <!-- web font -->
  <link href="//fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
  <!-- //web font -->
  <style>
    .button{
      font-size: 1em;
      color: #fff;
      background: transparent;
      border: 1px solid #fff;
      outline: none;
      cursor: pointer;
      padding: .6em 1em;
      -webkit-appearance: none;
      width: 100%;
      margin-top: 2em;
      transition: 0.5s all;
      -webkit-transition: 0.5s all;
      -moz-transition: 0.5s all;
      -o-transition: 0.5s all;
      -ms-transition: 0.5s all;
    }
    .button:hover {
      background: #FF9800;
      letter-spacing: 3px;
      color: #fff !important;
      border-color: #ff9800 !important;
    }
    #message,#messageTwo,#inputId{
      /*display: inline-block;!*不独占一行*!*/
      color: red;
      font-size: 8px;
      /*padding-left: 20px !*做内边距*!*/
    }
    #prompt,#inputId2{
      color: #249df3;
      font-size: 8px;
    }
    a{
      color: #9fb1be;
    }
    a:hover{
      color: #f3a02b;
    }
  </style>
</head>
<body>
<!-- main -->
<div class="main">
  <h1>忘记密码</h1>
  <div class="main-w3lsrow" style="display: flex; justify-content: center">
    <!-- login form -->
    <!-- sign up form -->
    <div class="login-form login-form-left" >
      <div class="agile-row" >
        <div class="login-agileits-top" >
          <form>
            <p>学号</p>
            <input type="text" id="id" class="id" name="id" required="">
            <p id="inputId" hidden="hidden">学号不存在！</p>
            <p id="inputId2" hidden="hidden">请输入十位数的学号</p>
            <p>新密码</p>
            <input type="password" id="newPassword" class="password" name="newPassword" required="" onfocus="check()" onblur="checkPassword()">
            <p id="message" hidden="hidden">您输入的密码格式错误！</p>
            <p id="prompt" hidden="hidden">长度6~16位，必须由数字和大小写字母组成！</p>
            <p>确认密码</p>
            <input type="password" id="confirmPassword" class="password" name="confirmPassword" required="" onfocus="message()" onblur="checkIsSame()">
            <p id="messageTwo" hidden="hidden">请确认两次输入密码相同！</p>
            <input type="button" class="button" value="确认修改" onclick="updatePassword()">
          </form>
        </div>
<!--        <div style="float: right;margin-top: 10px"><a style="font-size: 12px" href="forgetPassword.html">忘记密码?</a></div>-->

      </div>
    </div>
    <div class="clear"> </div>
  </div>
</div>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript' src='js/plugins.js'></script>
<script type='text/javascript' src='js/script.js'></script>
<script type='text/javascript' src='js/particles.js'></script>
<script type='text/javascript' src='js/aos.js'></script>
<script type='text/javascript' src='js/prism.js'></script>
<script type='text/javascript' src='js/gravatar.js'></script>
<script type="text/javascript">
  function updatePassword() {
    //获取id
    var id = $("#id").val();
    //用户输入的新密码
    var newPassword = $("#newPassword").val();
    //加密后的新密码
    var md5_newPassword=hex_md5(newPassword);
    //确定密码
    const confirmPassword = $("#confirmPassword").val();

      if(isEmpty(newPassword)||isEmpty(confirmPassword)){
        alert("请确保输入框都不为空！");
      }else if(checkPwd(newPassword)=="缺少内容,请确认是否同时包含大小写字母和数字"){
        // alert("密码格式要求:长度6~16位，必须由数字、大写字母、小写字母组成")
        document.getElementById("prompt").style.display="none";
        document.getElementById("message").style.display="inline";
        document.getElementById("message").innerText="缺少内容,请确认是否同时包含大小写字母和数字!";
      }else if(checkPwd(newPassword)=="长度不合格"){
        document.getElementById("prompt").style.display="none";
        document.getElementById("message").style.display="inline";
        document.getElementById("message").innerText="长度不合格!长度6~16位";
      }else if(confirmPassword!=newPassword){
        document.getElementById("messageTwo").style.display="inline";
        document.getElementById("messageTwo").innerText="请确认两次输入密码相同!";
      }else{
        //新密码等于确认密码输入的密码
        var user={
          "id" : id,
          "password" :md5_newPassword,
        };
        $.ajax({
          //修改密码连接的url
          url:"http://192.168.47.129:8010/user/updatePassword",
          type:"post",
          contentType:"application/json;charset=utf-8",
          data:JSON.stringify(user),
          success: function (data) {
            //更新密码更新session 采用id和密码全部覆盖
            localStorage.setItem("userId",id);
            localStorage.setItem("password",md5_newPassword);
            //跳转
            location.assign("login.html");
          },error: function() {
            alert("something went wrong");
          }
        })
      }

  }
  //判断字符串是否为空的函数 true表示是空字符串
  function isEmpty(password) {
    if(password === '' || password.trim().length === 0){
      return true;
    }else{
      return false;
    }
  }

  function check(){
    document.getElementById("prompt").style.display="inline";
    document.getElementById("message").style.display="none";
    var id = $("#id").val();
    console.log(id);
    if (isEmpty(id)){
      document.getElementById("inputId2").style.display="inline";
    }else{
      $.ajax({
        url:"http://192.168.47.129:8010/user/findUserById/"+id,
        success:function (data){
          let code=data.msg;
          if(code==="该用户不存在"){
            document.getElementById("inputId2").style.display="none";
            document.getElementById("inputId").style.display="inline";
            localStorage.setItem("haveId","false");
          }else{
            localStorage.setItem("haveId","true");
            document.getElementById("inputId2").style.display="none";
            document.getElementById("inputId").style.display="none";
          }
        }
      })
    }
  }

  function checkPwd(password){
    var obj = {}
    if(password.length >= 6 && password.length <= 16) {
      // 长度没问题
      // console.log('长度ok');
      // 是否同时包含了3样内容 - 遍历字符串
      for(var a=0; a<password.length; a++) {
        // 每个字符 - password[a]
        // 都要判断是否是数字 - 获取字符的阿斯克码
        var code = password.charCodeAt(a)
        // 判断阿斯克码是否在数字范围内
        if(code >= 48 && code <= 57) {
          // 在数字范围内
          obj.shuzi = true
        }
        // 判断是否包含了大写字母
        else if(code >= 65 && code <= 90) {
          obj.daxie = true
        } else if(code >= 97 && code <= 122) {
          obj.xiaoxie = true
        }
      }
      // 判断对象中是否有3个键值对
      // 计数
      var k = 0
      for(var key in obj) {
        k++
      }
      if(k === 3) {
        // 同时包含了3个东西
        return true;
      } else {
        return "缺少内容,请确认是否同时包含大小写字母和数字";
      }
    } else {
      return "长度不合格";
    }
  }
  function message(){
    document.getElementById("prompt").style.display="none";
    document.getElementById("message").style.display="none";
  }
  function checkIsSame(){
    let confirmPassword = $("#confirmPassword").val();
    let newPassword=$("#newPassword").val();
    if(confirmPassword!=newPassword){
      document.getElementById("messageTwo").style.display="inline";
      document.getElementById("messageTwo").innerText="请确认两次输入密码相同!";
    }else{
      document.getElementById("messageTwo").style.display="none";
    }
  }
  function checkPassword(){
    let password=$("#password").val();
    if(checkPwd(password)=="缺少内容,请确认是否同时包含大小写字母和数字"){
      // alert("密码格式要求:长度6~16位，必须由数字、大写字母、小写字母组成")
      document.getElementById("prompt").style.display="none";
      document.getElementById("message").style.display="inline";
      document.getElementById("message").innerText="缺少内容,请确认是否同时包含大小写字母和数字!";
    }else if(checkPwd(password)=="长度不合格"){
      document.getElementById("prompt").style.display="none";
      document.getElementById("message").style.display="inline";
      document.getElementById("message").innerText="长度不合格!长度6~16位";
    }
  }

</script>
</body>
</html>